<template>
<div class="body1">
   <el-header>
   <start-header/>
  </el-header>
  <!-- <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
    background-color="#fff"
  text-color="black"
  active-text-color="rgb(46, 136, 204)">
  <el-menu-item index="1">首页</el-menu-item>
  <el-menu-item index="2" >题库</el-menu-item>
  <el-submenu index="3" >
    <template slot="title">我的</template>
     <el-menu-item index="3-1" @click="myspace">我的空间</el-menu-item>
    <el-menu-item index="3-2" @click="myinformation">个人信息</el-menu-item>
    <el-menu-item index="3-2" @click="manage">管理</el-menu-item>
    <el-menu-item index="3-3" @click="exit">退出</el-menu-item>
  </el-submenu>
</el-menu> -->
<div class="body2">
 <div class="content"></div>
  <div class="contents">
    <h2><span>{{this.rows.id}}、</span>{{this.rows.title}}</h2>
    <div class="childContent">
      <div class="childOne">
      <div class="description">
        <h4>题目</h4>
       <div class="descritionContent">{{this.rows.description}}</div>
      </div>
      <div class=" input_description">
        <h4>输入格式</h4>
        <div class=" input_descriptionContent">{{this.rows.input_description}}</div>
        </div>
      <div class=" output_description">
        <h4>输出格式</h4>
        <div class=" output_descriptionContent">{{this.rows.output_description}}</div>
        </div>
      <div class=" question_range">
        <h4>数据范围</h4>
        <div  class=" question_rangeContent">{{this.rows.question_range}}</div>
        </div>
      <div class=" input_sample">
        <h4>样例输入</h4>
        <div class=" input_sampleContent">{{this.rows.input_sample}}</div>
        </div>
      <div class="output_sample">
        <h4>样例输出</h4>
        <div class="output_sampleContent">{{this.rows.output_sample}}</div>
        </div>
      </div>
      <div class="childTwo">
        <div class="difficulty"><div class="difficultyOne">难度：</div><div class="difficultyTwo">{{this.rows.difficulty}}</div></div>
        <div class="time_limit"><div class="time_limitOne">时间限制：</div><div class="time_limitTwo">{{this.rows.time_limit}}</div></div>
        <div class="ac"><div class="acOne">总通过数：</div><div class="acTwo">{{this.rows.ac}}</div></div>
        <div class="wa"><div class="waOne">未通过数</div><div class="waTwo">{{this.rows.wa}}</div></div>
        <div class="from"><div class="fromOne">来源：</div><div class="fromTwo">Atcode</div></div>
      </div>
    </div>
    <div class="childContents" id="MarkDown">
      <h4 class="answer">作答区域：</h4>
      <!-- 编辑器 -->
       <mavon-editor 
            v-model="question.code" 
            ref="md" 
            @change="change" 
            style="min-height: 400px;4width:740px;z-index: 9999;margin-left:10px;margin-top:10px;"
        />
        <button @click="submit">提交</button>
    </div>
  </div>
    <div class="content"></div>
</div>
<div class="bottom">
    <start-footer />
</div>
</div>
</template>
<style scoped>
.difficultyOne,.time_limitOne,.acOne,.waOne,.fromOne{
  flex:4;
}
.difficultyTwo,.time_limitTwo,.acTwo,.waTwo,.fromTwo{
  flex:2;
}
.difficulty,.time_limit,.ac,.wa,.from{
  flex:1;
  display: flex;
}
.difficulty,.ac,.from{
 background-color: rgb(210, 219, 240,0.7);
}
.description,
.input_description,
.output_description,
.question_range,.input_sample,
.output_sample{
  flex:1;
}
.input_sampleContent,.output_sampleContent{
  background-color: rgb(215, 230, 245);
}
.childContent{
display:flex;
width: 100%;
height: 40%;
margin-top: 20px;
}
.childContents{
  width: 100%;
height: 60%;
/* background-color: brown; */
}
.childOne{
flex:7;
background-color: rgb(210, 219, 240,0.7);
display: flex;
flex-direction: column;
margin-left:10px;
}
.childTwo{
  display:flex;
flex:3;
background-color: rgb(210, 219, 240,0.6);
flex-direction: column;
}
.question{
  flex:9;
}
.body1{
  display:flex;
  flex-direction:column;
}
.el-menu-demo{
  flex: 0 0 30px;
}
.content{
  flex:2;
  display: flex;
}
.contents{
  flex:6;
  background-color:rgba(203, 203, 236, 0.4);
  /* background-color: transparent; */
  margin-top:20px;
  margin-bottom: 20px;
  border-radius: 5px;
  box-shadow: 0 0 25px 10px rgba(200, 205, 233, 0.3);
  display: flex;
  flex-direction: column;
}
.body2{
   display: flex;
   justify-content: center;
   flex:800px;
   background-color: rgb(113, 121, 153,0.3);
   background-image: url("../../assets/background.jpg");
}
.bottom{
  flex:0 0 40px;
}  
 #MarkDown {
  height: 100%;
  width: 100%;
  /* background-color: blue; */
 }
 .answer{
  color:aliceblue;
  font-weight: 700;
  text-align:center;
  font-size:25px;
 }
  button{
        border: none;
        outline: none;  
        background-color: rgb(46, 136, 204); 
        width: 100px;
        height: 45px;
        /* border-radius: 0 20px 20px 0; */
        font-size: 20px;
        color:white;
        font-weight: 700;
        margin-left:320px;
        /* position:absolute;
        right:210px; */
     }
     .el-header{ 
        background-color: #DCE4F1;
        /* background-color: black; */
        color: #333; 
        text-align: center; 
        line-height: 80px;
    }
/* .title{
  flex: 1;
}   */
</style>
<script>
import StartHeader from '../StartCommon/StartHeader.vue'
import StartFooter from '../StartCommon/StartFooter.vue'
const axios = require('axios');
export default {
   components: { StartHeader,StartFooter},
   data () {
    return {
        //因为A组件传过来的是一个数组，所以这里定义一个数组来接收，具体情况随机应变
        // imgsListsUrl2: [],
      rows: [{
        title:''
      }],
      question: {
        user_id: 1,
        question_id: '',
        code: '',
   
      },
       // 输入的markdown
      html: '',    // 及时转的html
     

    }
    },
  mounted () {
      //this.imgsListsUrl2是自己在B组件里定义的数据
      //this.$route.params.imgsListsUrl2是传过来的参数
      // this.imgsListsUrl2 = this.$route.params.imgsListsUrl2
    this.rows = this.$route.params.rows
    console.log(this.$route.params.rows)
    console.log(this.rows)
    //请求所有的用户数据
   axios({
                method: 'post',
                url: '/getAllUsers',
             }).then(res => {
              // this.$message({
              //           message: '提交成功',
              //           type: 'success'
              // });
            // this.$router.replace('/Question')  
            console.log(res)
            })
  },
    methods: {
        aaa(){
            // console.log(this.imgsListsUrl2)
             console.log(this.rows)
             console.log(this.rows.title)
      },
        handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      myspace() {
         this.$router.replace('/Myspace')
      },
      myinformation() {
        this.$router.replace('/Myinformation')
      },
      manage() {
        this.$router.replace('/Manage')
      },
       // 所有操作都会被解析重新渲染
      change(value, render){
            // render 为 markdown 解析后的结果[html]
            this.html = render;
        },
        // 提交
      submit() {
        var content=this.question
        console.log(this.question);
        this.question.question_id = this.rows.id;
        console.log(this.question.question_id )
        console.log(this.html);
        console.log(content)
             axios({
                method: 'post',
                url: '/answerTheQuestion',
                data:content
             }).then(res => {
              this.$message({
                        message: '提交成功',
                        type: 'success'
              });
            this.$router.replace('/Question')  
            })
      },
      exit(){
      localStorage.clear()
			window.sessionStorage.clear()
			this.$router.push('/Login')

      }
        

      }
    }
</script>